<template>
    <div id="logistics">
        <el-dialog
        title="物流信息"
        :visible.sync="dialogVisible"
        :before-close="handleClose">
            <div slot="title">
                <span>物流信息</span>
                <span style="font-size: 14px; color: #ff7068">{{'（品牌数量：' + totalBrand + '、' + '商品数量：' + totalGoods + '）'}}</span>
            </div>
            <el-form v-model="formData" label-position="left" label-width="80px">
                <!-- <div class="address_message">
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content" >
                                <p style="font-size: 14px;">123</p>

                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="grid-content col_float_right" style="font-size: 12px;">123</div>
                        </el-col>
                    </el-row>
                </div> -->
                <el-form-item label="调拨单号:">
                    <el-input disabled type="textarea" v-model="titles"></el-input>
                </el-form-item>   
                <el-form-item label="发货类型:">
                    <el-select v-model="formData.deliveryType" size="small" placeholder="请选择发货方式">
                        <el-option label="快递发货" value="1"></el-option>
                        <el-option label="委托送货" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物流公司:">
                    <el-input type="text" size="small" v-model="formData.expressName" placeholder="请选择物流公司" clearable></el-input>
                </el-form-item>
                <el-form-item label="物流单号:">
                    <el-input size="small" v-model="formData.expressOrderId" clearable placeholder="请填写物流单号"></el-input>
                </el-form-item>
                <el-form-item label="打包数量:">
                    <el-input size="small" v-model="formData.totalPackage" clearable placeholder="请填写打包数量"></el-input>
                </el-form-item>
                <el-form-item label="运单照片:">
                    <upload v-if="dialogVisible" :materialImg="imageList" @handleDelImg="delImg" @changeMaterialImg="changeMaterialImg" maxLength= "1" uploadtype="less" ></upload>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handleClose">取 消</el-button>
                <el-button size="small" type="primary" @click="handleSubimitLogistics">确 定</el-button>
            </span>
        </el-dialog>
    </div>  
</template>
<script>
    import upload from './upload'
    export default {
        props: ['title', 'isShow', 'stockoutId', 'totalBrand', 'totalGoods'],
        components: { upload },
        computed: {
            dialogVisible: {
                get() {
                    return this.isShow
                },
                set() {}
            },
            titles: {
                get() {
                    return this.title.toString()
                },
                set() {}
            }
    
        },
        data() {
            return {
                userInfo: JSON.parse(sessionStorage.getItem('userInfo')),
                formData: {
                    expressName: '',
                    expressOrderId: '',
                    deliveryType: '1',
                    waybillPhoto: '',
                    totalPackage: ''
                },
                imageList: []
            }
        },
        methods: {
            /** 弹窗关闭 */
            handleClose() {
                this.$confirm('确认关闭？').then(_ => {
                    this.$emit('cancelShow', false)
                }).catch(_ => {});
            },
            /** 物流信息提交 */
            handleSubimitLogistics() {
                try{
                    let params= {
                        deliveryMan: this.userInfo.personName,
                        deliveryType: this.formData.deliveryType,
                        stockoutIdList: this.stockoutId,
                        expressName: this.formData.expressName,
                        expressOrderId: this.formData.expressOrderId,
                        waybillPhoto: this.imageList[0],
                        totalPackage: this.formData.totalPackage,
                        totalBrand: this.totalBrand,
                        totalGoods: this.totalGoods,
                        mobileNumber: ''
                    }
                    if(this.formData.expressName == '') {
                        this.$message('请填写快递公司名称')
                    }else if(this.formData.expressOrderId == '') {
                        this.$message('请填写快递单号')
                    }else{
                        this.$server.stockControlApi.createExpress(params).then(res => {
                            this.$emit('cancelShow', false)
                            this.$emit('getPickingList')
                        })
                    }
                }catch(err) {this.$paramsError(err)}
            },
            /**删除图片 */
            delImg(idx){
                this.imageList.splice(idx, 1)
            },
             /**更换图片 */
            changeMaterialImg(val) {
                this.imageList= val
            },
        }

    }
</script>
<style lang="less" scoped>
    .address_message {
        
        box-sizing: border-box;
        padding: 6px 10px;
        background: #dcdcdc;
        border-radius: 4px;
        margin-bottom: 10px;
    }
</style>